<template>
    <div>
        <div class="el-select-tree">
            <el-input v-model="organName" :placeholder="placeholder" :style="{'width': width}" readonly
                      @click.native="disabled?'':(visible=true)"></el-input>
            <div v-if="organName!==null && organName!=='' && typeof organName!=='undefined'"
                 class="el-icon-circle-close" @click.stop="clearData"></div>
        </div>
        <el-dialog
            :before-close="resetForm"
            :close-on-click-modal="false"
            :visible.sync="visible"
            append-to-body
            title="选择组织机构"
            width="400px"
        >
            <div class="select_tree_div">
                <el-input v-model="filterText" placeholder="输入企业名称查询"></el-input>
                <div class="page_tree" style="height: 500px;">
                    <el-tree ref="tree"
                             v-loading="loading"
                             :check-on-click-node="true"
                             :data="dataList"
                             :default-checked-keys="defaultKeys"
                             :default-expanded-keys="defaultKeys"
                             :expand-on-click-node="false"
                             :props="defaultProps"
                             node-key="value"
                             @node-click="nodeClick"
                    >
                        <div slot-scope="{ node, data }" :class="(data.value===selected.value)?'is-selected-tree':''"
                             class="page_el_tree_div_node">
                            <i v-if="data.content.organType==1" class="el-icon-s-home"/>
                            <i v-if="data.content.organType==2" class="el-icon-s-shop"/>
                            <div>
                                {{ data.label }}
                            </div>
                        </div>
                    </el-tree>
                </div>
                <div class="tree_button_div">
                    <el-button type="primary" @click="submit">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "organizationSelect",
    props: {
        id: String,
        organName: String,
        disabled: Boolean,
        selectLevel: Number,
        placeholder: {
            type: String,
            default: '组织机构',
        },
        width: {
            type: String,
            default: '200px',
        },
        disabledId: String, //不可选择内容
        selectType: Number,
    },
    data() {
        return {
            visible: false,
            loading: false,
            dataList: [],
            defaultProps: {
                children: 'childNode',
                label: 'label',
                disabled: (data, node) => this.disabledNode(data, node)
            },
            defaultKeys: [],
            filterText: '',

            selected: {},
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        visible(newval, oldval) {
            if (newval) {
                let userData = this.$root.getStorage("userData");
                this.getTreeList(userData.institutionId);
            }
        }
    },
    methods: {
        disabledNode(data, node) {
            if (this.disabledId) {
                return data.content.idPath.indexOf("|" + this.disabledId + "|") >= 0;
            }
        },
        getTreeList(parentsId) {
            this.loading = true;
            this.$axios.post("/CHILD_ORGANIZE/orgInstitution/getTreeList", {
                idPath: '|' + parentsId + '|',
                selectLevel: this.selectLevel,
            }).then(res => {
                this.dataList = res.data;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        nodeClick(data) {
            this.selected = data;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        submit() {
            if (this.selectType) {
                if (this.selected.content.organType !== this.selectType) {
                    if (this.selectType == 1) {
                        this.$message.error("请选择企业信息");
                    } else if (this.selectType == 2) {
                        this.$message.error("请选择部门信息");
                    }
                    return;
                }
            }
            this.$emit('change', this.selected);
            this.resetForm();
        },
        clearData() {
            this.$emit('update:organName', '');
            this.selected = {};
            this.$emit('change', {});
        },
        resetForm() {
            this.visible = false;
        },
    }
}
</script>

<style lang="scss">
.page_el_tree_div_node {
    i {
        display: inline;
        font-size: 20px;
    }

    div {
        display: inline;
        font-size: 14px;
    }
}

.is-selected-tree {
    div {
        color: #1e1e1f;
        font-weight: bolder;
    }
}
</style>